<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:ajax="https://ajax4jsf.dev.java.net/ajax">
    
    <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/scriptaculous.js"/>
    <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/effects.js"/>
    
    <script>
        Effect.Transitions.Elastic = function(pos) {
            return -1*Math.pow(4,-2*pos) * Math.sin((pos*3-1)*(3*Math.PI)/2) + 1;
        };
    </script>
    <style type="text/css">
        .scriptdemobtn {
            width: 75px;
        }
        .scriptdemocolumn-l {
            padding: 2px;
            text-align: right;
        }
        .scriptdemocolumn-r {
            padding: 2px;
            text-align: left;
        }
    </style>
    <div>
        <rich:spacer height="10" />
        
        <rich:panel  id="mypanel" >
            <div jsfc="f:facet" name="header">
                
                <h:outputText value="ASAG"/>
            </div>            
            <h:form>                
                <rich:spacer height="20"/>
                <rich:tabPanel>
                    <rich:tab label="ASAG">
                        <h:panelGrid visible="false" columnClasses="scriptdemocolumn-r">
                            TEXTO AUTO EXPLICATIVO
                        </h:panelGrid>
                    </rich:tab>
                    <rich:tab label="Ambiente" id="ambiente">
                        <h:panelGrid visible="false" styleClass="rsPanel" columns="3" columnClasses="scriptdemocolumn-r" id="panelGrid">
                            
                            <h:outputText styleClass="rsLabel" value="Número de Gerações:" />
                            <h:inputText id="idGeracao" styleClass="rsInput"  value="#{bean.algoritmo.parametros.paradaNumeroGeracoes}"/>
                            <h:message/>
                            
                            <h:outputText id="idPopulacao" styleClass="rsLabel" value="Tamanho da População:"/>
                            <h:inputText  styleClass="rsInput"  value="#{bean.algoritmo.parametros.tamanhoPopulacao}"/>  
                            <h:message/>
                            
                            <h:outputText id="idTamanhoCromossomo" styleClass="rsLabel" value="Tamanho do Cromossomo:"/>
                            <h:inputText  styleClass="rsInput"  value="#{bean.algoritmo.parametros.tamanhoCromossomo}">                                   
                                <a4j:support event="onchange" reRender="panelGrid"/>
                            </h:inputText>
                            <h:message/>
                            
                            <h:outputText styleClass="rsLabel" value="Taxa de Seleção:"/>
                            <h:inputText  styleClass="rsInput"  value="#{bean.algoritmo.parametros.taxaSelecao}"/> 
                            <h:message/>
                            
                            <h:outputText styleClass="rsLabel" value="Taxa de Cruzamento:"/>
                            <h:inputText  styleClass="rsInput"  value="#{bean.algoritmo.parametros.taxaCruzamento}"/>
                            <h:message/>
                            
                            <h:outputText styleClass="rsLabel" value="Taxa de Mutação:"/>
                            <h:inputText  styleClass="rsInput"  value="#{bean.algoritmo.parametros.taxaMutacao}"/>
                            <h:message/>
                            
                            <h:outputText styleClass="rsLabel" value="Tipo de Cruzamento:"/>                           
                            <h:selectOneMenu id="idCruzamento" value="#{bean.algoritmo.parametros.tipoCruzamento}">  
                                <ajax:support event="onchange" reRender="panelGrid"/>                                
                                <f:selectItems value="#{bean.cruzamentos}"/>                                
                            </h:selectOneMenu>
                            <h:message/>
                            
                            <h:outputText id="umPontoDeCorte" styleClass="rsLabel" value="Escolha o Ponto de Corte:"
                                          rendered="#{bean.algoritmo.parametros.tipoCruzamento == 0 and bean.algoritmo.parametros.tamanhoCromossomo > 0}" />                                                        
                            
                            <h:selectOneMenu id="idUmPontoDeCorte" layout="" value="#{bean.primeiroPontoDeCorte}"
                                             rendered="#{bean.algoritmo.parametros.tipoCruzamento == 0 and bean.algoritmo.parametros.tamanhoCromossomo > 0}">
                                <f:selectItems value="#{bean.cromossomos}"/>
                            </h:selectOneMenu>                            
                            
                            <h:selectOneMenu id="idDoisPontosDeCorte" layout="" value="#{bean.primeiroPontoDeCorte}"
                                             rendered="#{bean.algoritmo.parametros.tipoCruzamento == 0 and bean.algoritmo.parametros.tamanhoCromossomo > 0}">
                                <f:selectItems value="#{bean.cromossomos}"/>
                            </h:selectOneMenu>                             
                            
                            <h:outputText styleClass="rsLabel" value="Tipo de Seleção:"/>
                            <h:selectOneMenu id="idSelecao" layout="" value="#{bean.algoritmo.parametros.tipoSelecao}">
                                <f:selectItems value="#{bean.selecao}"/>
                            </h:selectOneMenu>
                            <h:message/>
                            
                            <h:outputText styleClass="rsLabel" value="Tipo de Mutação:"/>
                            <h:selectOneMenu id="idMutacao" layout="" value="#{bean.algoritmo.parametros.tipoMutacao}">
                                <f:selectItems value="#{bean.mutacao}"/>                                
                            </h:selectOneMenu>
                            <h:message/>
                            
                            <h:outputText styleClass="rsLabel" value="Classe Cromossomo:"/>
                            <rich:fileUpload  listHeight="60px" stopControlLabel="parar"
                                              clearControlLabel="remover" 
                                              fileUploadListener="#{bean.cromossomo.uploadFile}" cancelEntryControlLabel="cancelar"
                                              addControlLabel="adicionar"
                                              id="uploadCromossomo"
                                              clearAllControlLabel="limpar"
                                              uploadControlLabel="carregar"                                                  
                                              acceptedTypes="java">
                            </rich:fileUpload>
                            <h:message/>
                            
                            <h:outputText styleClass="rsLabel" value="Classe Fitness:"/>
                            <rich:fileUpload  listHeight="60px" stopControlLabel="parar"
                                              clearControlLabel="remover" 
                                              fileUploadListener="#{bean.fitness.uploadFile}" cancelEntryControlLabel="cancelar"
                                              addControlLabel="adicionar"                                         
                                              id="uploadFitness"
                                              clearAllControlLabel="limpar"
                                              uploadControlLabel="carregar"                                                                                
                                              acceptedTypes="java">
                            </rich:fileUpload>                                                                                                                                                                 
                            <h:message/>
                            
                            <h:message/>
                            <h:commandButton styleClass="rsButton" value="Executar" style="width: 75px" action="#{bean.button}"/>                                                                    
                            <h:message/>                        
                        </h:panelGrid>
                    </rich:tab>           
                    <rich:tab label="Resultado">
                        <h:panelGrid visible="false" columnClasses="scriptdemocolumn-r">
                            
                        </h:panelGrid>
                    </rich:tab>
                </rich:tabPanel>
            </h:form>                      
        </rich:panel>        
    </div>
</ui:composition>